/*
 * @Description: 文章详情
 * @Date: 2020-09-10 16:44:51
 * @Author: 黄治恩
*/

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Image, Button, Input } from 'antd';

// 右侧推荐 
import AsideRight from './aside-right' 
// 左侧操作
import AsideLeft from './aside-left'
import CommentOperation from '@/components/Operation/Comment-operation'
import ReplyOperation from '@/components/Operation/Reply-operation'
import ArticleItem from '@/components/Article/Article-item/Article-item'

import './detail.scss';

import logoUser from '@/assets/img/user/user1.png'

// 评论列表
function CommentList(props:{value:number}){
  // 回复列表
  let subCommentList = [11,33,44].map(item => 
    <SubCommentList key={item} value={item} />
  )
  return (
    <React.Fragment>
      <li className={`comment-item ${props.value === 1 ? 'subList' : ''}`}>
        <Image className="item-img" preview={false} width={32} height={32} src={logoUser} />
        <div className="comment-info">
          <Link to="/user?id=123" target="_blank" className="meta-box">
            我是名字{props.value}
          </Link>
          <div className="content">
            我是内容{Math.floor(Math.random() * 10 + 1)}
          </div> 
          <div className="limit-ctl-box">
            <div className="time">13分钟</div>
            <div className="operator">
              <ReplyOperation />
            </div>
          </div>
          {/* 回复 */}
          {
            props.value === 1 && <ul className="sub-comment-list">{subCommentList}</ul>
          }
        </div>
      </li>
    </React.Fragment>
  )
}

// 评论下的回复列表
function SubCommentList(props:{value:number}){
  return (
    <li className="item">
      <Image className="item-img" preview={false} width={32} height={32} src={logoUser} />
      <div className="comment-info">
        <Link to="/user?id=123" target="_blank" className="meta-box">
          我是名字{props.value}
        </Link>
        <div className="content">
          我是内容{props.value * Math.floor(Math.random() * 10 + 1)}
        </div>
        <div className="limit-ctl-box">
          <div className="time">13分钟</div>
          <div className="operator">
            <ReplyOperation />
          </div>
        </div>
      </div>
    </li>
  )
}

interface Props_type {
  match:{
    params:{
      id:string
    }
  },
  [propsName:string]:any
}

class ArticleDetail extends Component<Props_type>{

  state = {
    list:[{id:1},{id:2}]
  }

  componentDidMount(){
    let {id} = this.props.match.params
    console.log(id);
    // this.getData()
  }

  render() {
    let { list } = this.state
    // 评论列表
    let commentList = [1,3,4].map(item => 
      <CommentList key={item} value={item} />
    )
    // 相关文章列表
    const EntryList = list.map( (item:{id:number}) =>
      <React.Fragment key={item.id}>
        <ArticleItem className="entry-item" item={item} />
      </React.Fragment>
    )
    return (
      <div className="article-detail">
        <article className="article-detail-main">
          <div className="author-info">
            <Link to="/user?id=123" target="_blank" className="author-info__img">
              <Image preview={false} width={40} height={40} alt="logo" src={logoUser} />
            </Link>
            <div className="author-info__content">
              <Link to="/user?id=123" target="_blank" className="author-name">名字</Link>
              <div className="meta-box">
                <time className="time" dateTime="" >2020/09/10</time>
                <span className="views-count">阅读 10086</span>
              </div>
            </div>
            <Button className="author-info__follow-btn followed" type="primary" ghost>
              {true ? '已关注' : '关注'}
            </Button>
          </div>
          <div className="article-main">
            接下来是正文内容
          </div>
          <div className="author-info-block">
            <Image className="user-img" preview={false} width={40} height={40} alt="logo" src={logoUser} />
            <div className="author-info-box">
              <div className="profile-box">我是名字</div>
              <div className="meta-box">发布了 16 篇专栏 · 获得点赞 399 · 获得阅读 13,705</div>
            </div>
            <Button className="author-info__follow-btn " type="primary" ghost>
              {false ? '已关注' : '关注'}
            </Button>
          </div>
          <div id="comment-box">
            <div className="comment-list-box">
              <div className="container triangle-top">{/* 三角凸起 */}</div>
              <div className="comment-form">
                <div className="avatar-box">
                  <Image className="user-img" preview={false} width={32} height={32} src={logoUser} />
                </div>
                <div className="form-box">
                  <Input placeholder="输入评论..."></Input>
                  <div className="input-operation">
                    <CommentOperation />
                  </div>
                </div>
              </div>
              <ul className="comment-list">
                {commentList}
              </ul>
            </div>
          </div>
        </article>
        <div className="recommended-area">
          <h4 className="recommended-area-title">
            相关推荐
          </h4>
          <ul className="recommended-acticle">
            {EntryList}
          </ul>
        </div>
        {/* 右侧推荐 */}
        <aside className="article-detail-right">
          <AsideRight />
        </aside>
        {/* 左侧操作 */}
        <div className="article-detail-left">
          <AsideLeft />
        </div>
      </div>
    )
  }
}

export default ArticleDetail